<template>
  <el-row :gutter="15">
    <el-col :span="6">
      <el-form ref="form" :model="form" label-width="80px" @submit.native.prevent>
        <el-form-item label="col1" prop="col1">
          <el-input v-model="form.col1" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm()">提交</el-button>
        </el-form-item>
      </el-form>
      example2
      <el-form ref="form2" :model="form2" label-width="80px" :rules="form2Rule">
        <el-form-item label="col1" prop="col1">
          <el-input v-model="form2.col1" />
        </el-form-item>
        <el-form-item label="col2" prop="col2">
          <el-select-tree v-model="form2.col2" :data="treeData" :props="defaultTreeProps" :multiple="true" :clearable="true" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm2()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="6">
      <el-tree ref="tree" :data="treeData" show-checkbox node-key="id" :props="defaultTreeProps" />
    </el-col>
    <el-col :span="12">
      <el-card>
        <table-common
          :is-local-data="true"
          :default-tool-bar="false"
          :default-operating="false"
          :local-data="localData"
        >
          <el-table-column prop="col1" label="col1" />
          <el-table-column prop="col2" label="col2" />
        </table-common>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'tree',
  data() {
    return {
      localData: [
        {
          col1: 't1',
          col2: 't2'
        }
      ],
      form: {
        col1: ''
      },
      form2: {
        col1: '',
        col2: []
      },
      form2Rule: {
        col1: [{ required: true, trigger: 'blur' }],
        col2: [{ required: true, trigger: 'change' }]
      },
      selectNode: [],
      treeData: [
        {
          label: '新疆维吾尔自治区',
          id: '1',
          childrens: [
            {
              label: '乌鲁木齐市',
              id: '2',
              childrens: [
                { label: '达坂城区', id: '7', childrens: [] },
                { label: '头屯河区', id: '8', childrens: [] },
                { label: '乌鲁木齐县', id: '9', childrens: [] }
              ]
            },
            {
              label: '克拉玛依市',
              id: '3',
              childrens: [
                { label: '克拉玛依区', id: '10', childrens: [] },
                { label: '白碱滩区', id: '11', childrens: [] },
                { label: '独山子区', id: '12', childrens: [] }
              ]
            },
            { label: '吐鲁番地区', id: '4', childrens: [] },
            { label: '哈密地区', id: '5', childrens: [] },
            { label: '昌吉回族自治州', id: '6', childrens: [] }
          ]
        }
      ],
      defaultTreeProps: {
        children: 'childrens',
        label: 'label',
        value: 'id'
      }
    }
  },
  methods: {
    submitForm() {
      this.selectNode = this.$refs.tree.getCheckedKeys()
      this.localData.push(
        Object.assign({}, this.form, { col2: this.selectNode.join(',') })
      )
      this.$refs.tree.setCheckedKeys([])
      this.$refs.form.resetFields()
    },
    submitForm2() {
      this.$refs.form2.validate(valid => {
        if (valid) {
          this.localData.push(Object.assign({}, this.form2))
          this.$refs.form2.resetFields()
        }
      })
    }
  }
}
</script>

<style>
</style>
